<!-- 质保查询页面 -->
<template>
	<view>
		<view>
			<view class="banner">
				<view class="hint-title">官方质保查询</view>
				<view class="cu-form-group">
					<!-- <view class="title margin">车主手机号：</view> -->
					<input class="productId radius" name="car_user_mobile" placeholder="请输入手机号或者车牌号"
						placeholder-style="text-align:center;" v-model="inputData" />
				</view>
				<view style="margin-left: 32rpx;margin-right: 32rpx;">
					<button class="scan-btn" @click="searchClick()">确定</button>
				</view>
			</view>
			<view class="list_div">
				<view v-show="isList" v-for="(image,index) in images" :key="index" @click="handleClick(image.content)">
					<view :style="{backgroundSize:'cover',backgroundRepeat:'round',backgroundImage: 'url('+image.src+')'}">
						<text style="font-weight: bold;">{{image.content}}</text>
					</view>
				</view>
				<view v-show="!isList" @click="isList=true">
					<contentVue  :name="name" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import contentVue from './components/content.vue';
	export default {
		components: {
			contentVue,
		},
		data() {
			return {
				hint: '',
				dataList: [],
				currentItem: {},
				show: false,
				logo: '',
				isList: true,
				searchData: [],
				name: '',
				inputData: '',
				images: [{
						src: "'https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/22/7b3db9d656064f9f805bf09ac02c9023.png'",
						content: "改色膜质保内容",
					},
					{
						src: "'https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/22/15d8ec6f02724845a8d9161d443de208.png'",
						content: "漆面保护膜质保内容",
					},
					{
						src: "'https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/22/12a754aab0034804acc97f3385c8c115.png'",
						content: "安全隔热膜质保内容",
					},
					{
						src: "'https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/22/a3609d9b98924a8d91aca852d6dca856.png'",
						content: "膜品TPU质保内容",
					}
				]
			}
		},
		// 左上角返回按钮事件处理
		onBackPress(options) {
			if(!this.isList){ this.isList = true;return true;}
			else{ return false;}
		},
		methods: {

			handleClick(name) {
				console.log(name);
				this.name = name;
				this.isList = false;
			},

			// 	跳转到查询页面
			async searchClick() {
				let inputData = this.inputData.trim();
				if(inputData===''){
					uni.showToast({icon: 'error',title: '请完善信息'});
					return;
				}
				let conditions = '1=1';
				conditions += " and '" + inputData + 
				(/^1[345789]\d{9}$/.test(inputData)? "' = `car_user_mobile`" :  "' = `car_id`");
				let res = await this.$api.getArchives({
					model: 6,
					channel: 53,
					condition: conditions
				});
				this.dataList = res.data.archivesList;
				if (this.dataList.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '没有查询到相关产品信息'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/search/searchdetails?data='+encodeURIComponent(JSON.stringify(this.dataList))
				})
			},

			async formSubmit(e) {
				let conditions = '1=1';
				let data = e.detail.value;
				if (data.car_user_mobile.trim().length > 0) {
					conditions += " and '" + data.car_user_mobile + "' = `car_user_mobile`";
				}
				if (data.product_id.trim().length > 0) {
					conditions += " and '" + data.product_id + "' = `product_id`";
				}
				if (data.car_id.trim().length > 0) {
					conditions += " and '" + data.car_id + "' = `car_id`";
				}
				if (data.car_case_id.trim().length > 0) {
					conditions += " and '" + data.car_case_id + "' = `car_case_id`";
				}
				let res = await this.$api.getArchives({
					model: 6,
					channel: 53,
					condition: conditions
				});
				this.dataList = res.data.archivesList;
				if (this.dataList.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '没有查询到相关产品信息'
					})
				}
			},

			checkDetail(item) {
				this.currentItem = item;
				this.show = true;
			},

			handleItems(items) {
				if (items == undefined || items == '') return '';
				let its = JSON.parse(items);
				let ret = '';
				for (let it in its) {
					ret += its[it] + '; ';
				}
				return ret;
			},

			scanBar() {
				//扫条形码识别
				let that = this;
				uni.scanCode({
					scanType: ['barCode'],
					success: async function(code) {
						console.log(code);
						//查询
						let conditions = "'" + code.result + "' = `product_id`";
						let res = await that.$api.getArchives({
							model: 6,
							channel: 53,
							condition: conditions
						});
						that.dataList = res.data.archivesList;
						if (that.dataList.length <= 0) {
							uni.showToast({
								icon: 'none',
								title: '没有查询到产品编号为' + code.result + '的质保信息'
							});
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '扫码失败'
						})
					}
				})
			}
		},
		async onLoad() {
			let res = await this.$api.getPage({
				id: 5
			});
			if (res.code) {
				this.hint = res.data.content;
			}
			this.logo = this.$global.logo;
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.list_div {
		// background-color: #999999;
		margin: 40px 20px;
		height: auto;

		view {
			height: 200px;
			background-repeat: no-repeat;
			background-size: cover;
			margin-top: 30px;
			position: relative;
			// border: 1px solid black;
			view{
				width: 100%;
				background-size: cover;
			}
		}

		text {
			display: inline-block;
			position: absolute;
			top: 22px;
			left: 24px;
			font-size: 16px;
			font-weight: 400;
		}

	}

	.scan {
		// color: white;
		text-align: center;
	}



	.scan-title {
		margin-bottom: 50upx;
	}

	.line {
		text-align: center;
		line-height: 100upx;
		position: relative;
		z-index: 1;

		&::after {
			content: "";
			display: block;
			width: calc(100% - 80rpx);
			height: 2rpx;
			background: #e5e5e5;
			position: absolute;
			top: 48rpx;
			left: 30rpx;
			z-index: -1;
		}

		.line-text {
			color: #2b2b2b;
			display: inline-block;
			background: #fff;
			padding: 0 20rpx;
		}
	}

	.search-form {
		margin: 50upx;
	}

	.title {
		// color: white;
		width: 220upx;
		text-align: right;
	}

	.cu-form-group {
		width: 100%;
		border-top: none;
		margin-bottom: 30rpx;

		.radius {
			background-color: #f6f6f6;
			border-radius: 60rpx;
			border: none;
			height: 90rpx;
			line-height: 90rpx;
			min-height: 90rpx;
			padding-left: 20rpx;
		}

		.input-placeholder {
			text-align: center;
		}
	}

	.productId,
	.carId,
	.rackId {
		height: 60upx;
		border: 2upx solid grey;
		padding-left: 10upx;
		font-size: 14px;
	}

	.product-item {
		margin-bottom: 50upx;
		padding: 0 30upx;
		height: 75upx;
		line-height: 75upx;
		color: #999999;
		// border: 2upx solid red;

		.left {
			// color: white;
			width: 25%;
			// border: 2upx solid red;
		}

		.right {
			color: #999999;
			width: 75%;
			padding: 15upx 5upx;
			border: 2upx solid grey;
			border-radius: 10upx;
		}
	}

	// .search-btn {
	// 	width: calc(100% - 100rpx);
	// 	margin-top: 50upx;
	// 	height: 80upx;
	// 	line-height: 80upx;
	// 	background-color: #203864;
	// 	color: #fff;
	// 	font-size: 30rpx;
	// 	border-radius: 40rpx;
	// }

	.tips {
		// color: white;
	}

	.items {
		border: 2upx gray solid;
		border-radius: 10upx;
		margin: 10upx;
		padding: 10upx;
		font-size: 30upx;
	}

	.car-safe {
		font-size: 32upx;
		color: black;

		.left {
			width: 200upx;
			padding: 12upx;
			height: 70upx;
		}

		.right {
			height: 70upx;
			padding: 12upx;
		}
	}

	.banner {
		margin-top: 40rpx;

		.hint-title {
			// color:white;
			text-align: center;
			font-size: 30rpx;
			font-weight: 700rpx;
			line-height: 120rpx;
			font-weight: bold;
		}
		view{
			.scan-btn {
				height: 80upx;
				background-color: #FBCB11;
				// width: calc(100% - 55rpx);
				color: black;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				// border: none;
				&::after{
					display: none;
				}
				::v-deep button {
					background-color: #FBCB11;
					// color: black;
				}
			}
		}
		

	}

	.watermark {
		// background: url('') no-repeat;
		background-size: 100% auto;
		background-position-y: center;
	}

	.td-left {
		// width: 25%;
	}

	.th-title {
		text-align: center;
		line-height: 40px;
		font-size: 1rem;
		font-weight: bold;
		font-family: "黑体";
	}
</style>
<style>
	/deep/ .uni-table-td {
		padding: 10rpx 20rpx !important;
	}

	/deep/ .uni-table-tr:nth-child(even) {
		background-color: #f2f2f2;
	}
</style>